import React, { useCallback, useEffect, useState } from 'react'
import '@/views/homeStyle/zhinengStyle/zhineng.scss'
import Student from '@/component/Student';
import Water from '@/component/Water';
import School from '@/component/School';
import Hoc_login from '@/utils/Hoc_login';
import io from 'socket.io-client'
import Ces from '@/component/Ces';


let Io = io("http://localhost:3000")
function Zhineng() {
    const [data, setData] = useState([])

    useEffect(() => {
        const getData = async (data) => {
            Io.on('data', res => {
                console.log(res)
                setData(res)
            })
        }

        getData()
    }, [])

    return (
        <>
            {/* 左侧盒子 */}
            <div className="leftBox">
                {/*环境监测  */}
                <div className="huanJing">
                    <nav>环境监测</nav>

                    <div className='tian-0'>
                        <dl>
                            <dt><h1>30℃</h1></dt>
                            <dd>
                                <p>
                                    <span>晴</span>
                                    <span>☀高温黄色预警</span>
                                </p>
                                <p>24~36℃</p>
                            </dd>
                        </dl>
                        <div className='tian-1'>
                            <p>
                                <span>体感</span>
                                <span>31℃</span>
                            </p>
                            <p>
                                <span>风力</span>
                                <span>南风3级</span>
                            </p>
                            <p>
                                <span>温度</span>
                                <span>34%</span>
                            </p>
                        </div>
                        <div className="tian-2">
                            <img src="../../public/icon/huan-1.png" alt="" />
                            <img src="../../public/icon/huan-2.png" alt="" />
                        </div>
                    </div>
                </div>

                {/* 学生分布 */}
                <div className="student">
                    <nav>学生分布情</nav>
                    <Student />
                </div>
            </div>


            {/* 中间盒子 */}
            <div className="cenetrBox">
                <Ces />
            </div>

            {/* 右侧盒子 */}
            <div className="rightBox">
                {/* 水电用量 */}
                <div className="water">
                    <nav>水电用量</nav>
                    <div className="water-0">
                        <div className="water-1">
                            <div className="water-1-lft">
                                <img src="../../public/icon/water-1.jpg" alt="" />
                                <div>
                                    <h1>72670</h1>
                                    <p>总用电量（度）</p>
                                </div>
                            </div>
                            <div className="water-1-rgt">
                                <img src="../../public/icon/water-2.png" alt="" />
                                <div>
                                    <h1>6809</h1>
                                    <p>总用水量（吨）</p>
                                </div>
                            </div>
                        </div>
                        <Water></Water>
                    </div>
                </div>

                {/* 校园人员liudong */}
                <div className="school">
                    <nav>校园人员流动情况</nav>
                    <div className="school-0">
                        <div className="school-1">
                            <div className="school-1-lft">
                                <img src="../../public/icon/school-1.png" alt="" />
                                <div>
                                    <h1>6</h1>
                                    <p>昨日外来访客</p>
                                </div>
                            </div>
                            <div className="school-1-rgt">
                                <img src="../../public/icon/school-2.png" alt="" />
                                <div>
                                    <h1>13</h1>
                                    <p>今日外来访客</p>
                                </div>
                            </div>
                        </div>
                        <School />
                    </div>
                </div>
            </div>
        </>
    )
}

export default Hoc_login(Zhineng)
